import {
  createImageObject,
  createTextGroup,
  getProcessValue,
  setBackground,
  textAnimation,
  createContainerObject,
  toggleAlphaTween,
  isDev,
  getViewportY,
} from '../utils/index';
import writing from '../utils/text';
import { MainScene, ScreenConfig, ScreenOptions } from './types';

const screenAll: { [x: string]: (scene: MainScene, op: ScreenOptions) => ScreenConfig } = {};

screenAll.screen1 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const x = 0;
  const y = op.startY || 0;
  const height = 0;
  const positionY = y + height;
  // const bg = createHomeBg(scene);

  // const screenPaddingTop = 0;
  // const screenPaddingBottom = 0;

  // const height = bg.height + screenPaddingBottom + screenPaddingTop;
  // const positionY = y + height;

  // const { centerX, centerY } = scene.cameras.main;

  // const g1_text = scene.add.text(0, 0, writing.screen_1.docs);
  // g1_text.setStyle({ fill: '#000', align: 'center', font: 'bold 50px huakang' });
  // g1_text.setX(centerX - g1_text.width / 2);
  // g1_text.setY(g1_text.height);
  // g1_text.setAlpha(0);

  // const g1_luohu = scene.add.image(centerX - 28, centerY + 117, 'image-g1_luohu');
  // g1_luohu.setDepth(1);

  // const g1_light = scene.add.image(g1_luohu.x, g1_luohu.y, 'image-g1_light');

  // g1_light.setAlpha(0);
  // toggleAlphaTween({ scene, targets: [g1_light, g1_text], alpha: 1 });
  // scene.tweens.add({
  //   targets: g1_light,
  //   repeat: -1,
  //   props: { angle: 90 },
  // });
  // scene.tweens.add({
  //   targets: g1_luohu,
  //   props: { scale: 1.5 },
  // });

  const config: ScreenConfig = {
    x,
    y,
    height,
    positionY,
    animate: () => {},
  };

  scene.screen_1 = config;

  return scene.screen_1;
};

screenAll.screen2 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g2_bg').setY(y);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const { icon, config, resetAnimate } = createImageObject(
    scene,
    { x, y },
    {
      name: 'person',
      image: 'image-g2_icon1',
      offsetX: 448,
      offsetY: 580,
      distanceY: 200,
      distanceX: -100,
      scale: 0.8,
      animate_offset: 400,
    },
  );

  const icon2 = scene.add.image(icon.x + config.distanceX, icon.y + config.distanceY, 'image-g2_icon2');
  icon2.setOrigin(0, 0).setAlpha(0);

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_2,
      direction: 'left',
      offsetX: 30,
      offsetY: 946,
      animate_offset: 300,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
    resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent, moveY, moveX } = opt.data;
        const scale = getProcessValue(percent, 0.8, 1);
        icon.setScale(scale);
        icon.setX(moveX);
        icon.setY(moveY);
        icon.setAlpha(1);
        icon2.setAlpha(0);
      }
      if (opt.type === 'start') {
        icon.setAlpha(1);
        icon2.setAlpha(0);
      } else if (opt.type === 'end') {
        icon.setAlpha(0);
        icon2.setAlpha(1);
      }
    });
  };

  const screen: ScreenConfig = {
    x,
    y,
    height,
    positionY,
    animate,
  };
  scene.screen_2 = screen;

  return screen;
};

screenAll.screen3 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 200;

  const bg = setBackground(scene, 'image-g3_bg').setY(y);

  const h = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + h;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_3,
      direction: 'bottom',
      offsetX: 30,
      offsetY: 30,
      distanceY: 400,
      animate_offset: -100,
    },
  );

  const icon1 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon1',
      image: 'image-g3_icon1',
      offsetX: 231,
      offsetY: 500,
      alpha: 0,
      distanceX: 20,
      distanceY: 20,
      animate_distance: 50,
      animate_offset: 100,
    },
  );

  const icon1_animate = () => {
    icon1.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent, moveX, moveY } = opt.data;
        const alpha = getProcessValue(percent, 0, 1);
        icon1.icon.setAlpha(alpha);
        icon1.icon.setX(moveX);
        icon1.icon.setY(moveY);
      } else if (opt.type === 'end') {
        icon1.icon.setAlpha(1);
      } else if (opt.type === 'start') {
        icon1.icon.setAlpha(0);
      }
    });
  };
  const icon2 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon2',
      image: 'image-g3_icon2',
      offsetX: 241,
      offsetY: icon1.config.offsetY + 100,
      alpha: 0,
      distanceX: 20,
      distanceY: 20,
      animate_distance: 50,
      animate_offset: icon1.config.animate_offset + 40,
    },
  );

  const icon2_animate = () => {
    icon2.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent, moveX, moveY } = opt.data;
        const alpha = getProcessValue(percent, 0, 1);
        icon2.icon.setAlpha(alpha);
        icon2.icon.setX(moveX);
        icon2.icon.setY(moveY);
      } else if (opt.type === 'start') {
        icon2.icon.setAlpha(0);
      } else if (opt.type === 'end') {
        icon2.icon.setAlpha(1);
      }
    });
  };

  const icon3 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon3',
      image: 'image-g3_icon3',
      offsetX: 250,
      offsetY: icon2.config.offsetY + 100,
      alpha: 0,
      distanceX: 20,
      distanceY: 20,
      animate_distance: 50,
      animate_offset: icon2.config.animate_offset + 40,
    },
  );
  const icon3_animate = () => {
    icon3.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent, moveX, moveY } = opt.data;
        const alpha = getProcessValue(percent, 0, 1);
        icon3.icon.setAlpha(alpha);
        icon3.icon.setX(moveX);
        icon3.icon.setY(moveY);
      } else if (opt.type === 'start') {
        icon3.icon.setAlpha(0);
      } else if (opt.type === 'end') {
        icon3.icon.setAlpha(1);
      }
    });
  };
  const icon4 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon4',
      image: 'image-g3_icon4',
      offsetX: 260,
      offsetY: icon3.config.offsetY + 100,
      alpha: 0,
      distanceX: 20,
      distanceY: 20,
      animate_distance: 50,
      animate_offset: icon3.config.animate_offset + 40,
    },
  );
  const icon4_animate = () => {
    icon4.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent, moveX, moveY } = opt.data;
        const alpha = getProcessValue(percent, 0, 1);
        icon4.icon.setAlpha(alpha);
        icon4.icon.setX(moveX);
        icon4.icon.setY(moveY);
      } else if (opt.type === 'start') {
        icon4.icon.setAlpha(0);
      } else if (opt.type === 'end') {
        icon4.icon.setAlpha(1);
      }
    });
  };

  const icon5 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon5',
      image: 'image-g3_icon5',
      offsetX: 255,
      offsetY: icon4.config.offsetY + 150,
      alpha: 0,
      distanceX: 20,
      distanceY: 20,
      animate_distance: 50,
      animate_offset: icon4.config.animate_offset + 40,
    },
  );

  const icon5_animate = () => {
    icon5.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent, moveX, moveY } = opt.data;
        const alpha = getProcessValue(percent, 0, 1);
        icon5.icon.setAlpha(alpha);
        icon5.icon.setX(moveX);
        icon5.icon.setY(moveY);
      } else if (opt.type === 'start') {
        icon5.icon.setAlpha(0);
      } else if (opt.type === 'end') {
        icon5.icon.setAlpha(1);
      }
    });
  };

  const icon6 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon6',
      image: 'image-g3_icon6',
      offsetX: 250,
      offsetY: icon5.config.offsetY + 100,
      alpha: 0,
      distanceX: 20,
      distanceY: 20,
      animate_distance: 50,
      animate_offset: icon5.config.animate_offset + 40,
    },
  );

  const icon6_animate = () => {
    icon6.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent, moveX, moveY } = opt.data;
        const alpha = getProcessValue(percent, 0, 1);
        icon6.icon.setAlpha(alpha);
        icon6.icon.setX(moveX);
        icon6.icon.setY(moveY);
      } else if (opt.type === 'start') {
        icon6.icon.setAlpha(0);
      } else if (opt.type === 'end') {
        icon6.icon.setAlpha(1);
      }
    });
  };

  const icon7 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon7',
      image: 'image-g3_icon7',
      offsetX: 250,
      offsetY: icon6.config.offsetY + 150,
      alpha: 0,
      distanceX: 20,
      distanceY: 20,
      animate_distance: 50,
      animate_offset: icon6.config.animate_offset + 40,
    },
  );

  const icon7_animate = () => {
    icon7.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent, moveX, moveY } = opt.data;
        const alpha = getProcessValue(percent, 0, 1);
        icon7.icon.setAlpha(alpha);
        icon7.icon.setX(moveX);
        icon7.icon.setY(moveY);
      } else if (opt.type === 'start') {
        icon7.icon.setAlpha(0);
      } else if (opt.type === 'end') {
        icon7.icon.setAlpha(1);
      }
    });
  };
  icon7.icon.setDepth(7);

  const animate = () => {
    textAnimation(scene, textGroup);

    icon1_animate();
    icon2_animate();
    icon3_animate();
    icon4_animate();
    icon5_animate();
    icon6_animate();
    icon7_animate();
  };

  const screen: ScreenConfig = { x, y, height: h, positionY, animate };

  scene.screen_3 = screen;

  return screen;
};

screenAll.screen4 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 200;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g4_bg');

  const h = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + h;

  bg.setY(y + (h - bg.height) / 2);

  const icon1 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon1',
      image: 'image-g4_icon1',
      offsetX: scene.cameras.main.width / 2 + (scene.cameras.main.width - 562) / 2,
      offsetY: 300,
      scale: 0.2,
      alpha: 0,
      origin: [0.5, 0],
      distanceX: -(scene.cameras.main.width - 562) / 2,
      distanceY: 100,
      animate_offset: -300,
    },
  );

  const textGroup = createTextGroup(
    scene,
    { x, y: y + screenPaddingTop },
    {
      name: 'textGroup',
      text: writing.screen_4,
      direction: 'left',
      offsetX: 30,
      offsetY: 30,
      animate_offset: 200,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);

    icon1.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent, moveX, moveY } = opt.data;
        const scale = getProcessValue(percent, 0.2, 1);
        const alpha = getProcessValue(percent, 0, 1);
        icon1.icon.setScale(scale);
        icon1.icon.setAlpha(alpha);
        icon1.icon.setX(moveX);
        icon1.icon.setY(moveY);
      } else if (opt.type === 'start') {
        icon1.icon.setAlpha(0);
        icon1.icon.setScale(0);
      } else if (opt.type === 'end') {
        icon1.icon.setScale(1);
        icon1.icon.setAlpha(1);
      }
    });
  };

  const screen: ScreenConfig = { x, y, height: h, positionY, animate };
  scene.screen_4 = screen;
  return screen;
};

screenAll.screen5 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 300;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g5_bg');

  const h = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + h;

  bg.setY(y + (h - bg.height) / 2);

  const icon1 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon1',
      image: 'image-g5_icon1',
      offsetX: -443,
      offsetY: 100,
      distanceY: 290,
      distanceX: 443,
      animate_offset: 100,
    },
  );
  icon1.icon.setDepth(1);

  const icon2 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon2',
      image: 'image-g5_icon2',
      offsetX: scene.cameras.main.width,
      offsetY: 100,
      distanceY: 300,
      distanceX: -373,
      animate_offset: 100,
    },
  );

  const icon3 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon3',
      image: 'image-g5_icon3',
      offsetX: 0,
      offsetY: 180,
      alpha: 0,
      distanceY: 0,
      distanceX: 0,
      animate_distance: 40,
      animate_offset: -120,
    },
  );

  icon3.icon.setDepth(2);

  const icon4 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon4',
      image: 'image-g5_icon4',
      offsetX: 146,
      offsetY: 450,
      alpha: 0,
      scale: 0,
      origin: [0, 1],
    },
  );
  const icon5 = createContainerObject(
    scene,
    { x, y },
    {
      name: 'icon5',
      offsetX: 0,
      offsetY: 0,
      distanceY: 0,
      distanceX: 0,
      animate_distance: 300,
      animate_offset: scene.cameras.main.height,
    },
  );

  const { width } = scene.cameras.main;
  const _icon5_1 = new Phaser.GameObjects.Graphics(scene);
  const _icon5_2 = new Phaser.GameObjects.Image(scene, 0, screenPaddingTop, 'image-g5_icon5').setOrigin(0, 0);

  _icon5_1.fillStyle(0xffffff, 0.9).fillRect(0, 0, width, h);
  _icon5_2.setX((width - _icon5_2.width) / 2);

  icon5.icon.add([_icon5_1, _icon5_2]);

  icon5.icon.height = h;
  icon5.icon.width = width;
  icon5.icon.setAlpha(0);
  icon5.icon.setDepth(5);

  const textGroup = createTextGroup(
    scene,
    { x: 0, y },
    {
      name: 'textGroup',
      text: writing.screen_5,
      direction: 'bottom',
      offsetX: 30,
      offsetY: 30,
      animate_offset: 200,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
    icon1.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveX, moveY } = opt.data;
        icon1.icon.setX(moveX);
        icon1.icon.setY(moveY);
      }
    });
    icon2.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveX, moveY } = opt.data;
        icon2.icon.setX(moveX);
        icon2.icon.setY(moveY);
      }
    });

    icon3.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent } = opt.data;
        const alpha = getProcessValue(percent, 0, 1);
        const scale = getProcessValue(percent, 0, 1);
        icon1.icon.setAlpha(1 - alpha);
        icon2.icon.setAlpha(1 - alpha);
        icon3.icon.setAlpha(alpha);
        icon4.icon.setAlpha(alpha);
        icon4.icon.setScale(scale);
      } else if (opt.type === 'start') {
        icon1.icon.setAlpha(1);
        icon2.icon.setAlpha(1);
        icon3.icon.setAlpha(0);
        icon4.icon.setAlpha(0);
        icon4.icon.setScale(0);
      } else if (opt.type === 'end') {
        icon1.icon.setAlpha(0);
        icon2.icon.setAlpha(0);
        icon3.icon.setAlpha(1);
        icon4.icon.setAlpha(1);
        icon4.icon.setScale(1);
      }
    });

    icon5.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent } = opt.data;
        const alpha = getProcessValue(percent, 0, 1);
        icon5.icon.setAlpha(alpha);
      } else if (opt.type === 'start') {
        icon5.icon.setAlpha(0);
      } else if (opt.type === 'end') {
        icon5.icon.setAlpha(1);
      }
    });
  };

  const screen: ScreenConfig = {
    x,
    y,
    height: h,
    positionY,
    animate,
  };
  scene.screen_5 = screen;
  return screen;
};

screenAll.screen6 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g6_bg').setY(y);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  bg.setY(y + (height - bg.height) / 2);

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_6,
      direction: 'left',
      offsetX: 30,
      offsetY: 30,
      distanceY: 300,
      animate_offset: 600,
    },
  );

  const sound = scene.sound.get('g6');

  const animate = (viewY: number) => {
    textAnimation(scene, textGroup);
    if (viewY > y + height / 3 && viewY < positionY) {
      if (!sound.isPlaying) sound.play();
    }
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_6 = screen;
  return screen;
};

screenAll.screen7 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 200;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g7_bg').setY(y);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  bg.setY(y + (height - bg.height) / 2);

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_7,
      direction: 'bottom',
      offsetX: 30,
      offsetY: 30,
      animate_offset: 200,
    },
  );

  const sound = scene.sound.get('g7');

  const animate = (viewY: number) => {
    textAnimation(scene, textGroup);
    if (viewY > y + height / 3 && viewY < positionY) {
      if (!sound.isPlaying) sound.play({ delay: 1 });
    }
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_7 = screen;
  return screen;
};

screenAll.screen8 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 200;

  const bg = setBackground(scene, 'image-g8_bg').setY(y);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_8,
      direction: 'bottom',
      offsetX: 30,
      offsetY: height - 400,
      animate_offset: -300,
    },
  );

  const lantern = scene.add.sprite(x, bg.y + 440, 'lantern');
  lantern.setX((scene.cameras.main.width - lantern.width) / 2);
  lantern.setOrigin(0, 0);

  scene.anims.create({
    key: 'numerate',
    frames: scene.anims.generateFrameNumbers('lantern', { start: 0, end: 1 }),
    frameRate: 1,
    repeat: -1,
  });

  lantern.play('numerate', true);

  const animate = () => {
    textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_8 = screen;
  return screen;
};

screenAll.screen9 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 100;

  const bg = setBackground(scene, 'image-g9_bg').setY(y);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_9,
      direction: 'left',
      offsetX: 30,
      offsetY: height - 300,
      animate_offset: -100,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_9 = screen;
  return screen;
};

screenAll.screen10 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 100;

  const bg = setBackground(scene, 'image-g10_bg').setY(y);
  bg.setDisplaySize(scene.cameras.main.width, bg.height);
  bg.setW(scene.cameras.main.width);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const icon1 = scene.add.image(0, 0, 'image-g10_icon1');
  icon1.setOrigin(0, 0);
  icon1.setX(x + 450);
  icon1.setY(y + 680);
  icon1.setScale(0.8);
  // icon1.setDepth(2);

  const icon2 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon1',
      image: 'image-g10_icon2',
      offsetX: 640,
      offsetY: 820,
      scale: 0.2,
      alpha: 0,
      origin: [0.8, 0.8],
      distanceX: -45,
      animate_offset: 0,
      animate_distance: 80,
    },
  );
  icon2.icon.setDisplaySize(scene.cameras.main.width, icon2.icon.height);

  // icon2.icon.setDepth(1);

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_10,
      direction: 'right',
      offsetX: 30,
      offsetY: 30,

      animate_offset: 500,
    },
  );

  const textGroup1 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_11,
      direction: 'left',
      offsetX: 30,
      offsetY: 1000,

      animate_offset: 200,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
    textAnimation(scene, textGroup1);

    icon2.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent, moveX } = opt.data;
        const scale = getProcessValue(percent, 0.2, 0.92);
        const alpha = getProcessValue(percent, 0, 2);
        const alpha_icon1 = getProcessValue(percent, 1, 0);
        icon1.setAlpha(alpha_icon1);
        icon2.icon.setAlpha(alpha);
        icon2.icon.setX(moveX);
        icon2.icon.setScale(scale);
      } else if (opt.type === 'start') {
        icon2.icon.setScale(0.2);
        icon2.icon.setAlpha(0);
        icon1.setAlpha(1);
      } else if (opt.type === 'end') {
        icon1.setAlpha(0);
        icon2.icon.setAlpha(1);
        icon2.icon.setScale(0.92);
      }
    });
  };

  const { y_animate_start, y_animate_end } = icon2.config;

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    isMoveCameras: true,
    y_animate_start,
    y_animate_end,
    animate,
  };

  scene.screen_10 = screen;
  return screen;
};

screenAll.screen11 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 0;

  // const bg = setBackground(scene, 'image-g11_bg').setY(y);

  const height = 0 + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  // const textGroup = createTextGroup(
  //   scene,
  //   { x, y },
  //   {
  //     name: 'textGroup',
  //     text: writing.screen_11,
  //     direction: 'bottom',
  //     offsetX: 30,
  //     offsetY: 900,
  //     animate_offset: 100,
  //   },
  // );

  const animate = () => {
    // textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_11 = screen;
  return screen;
};

screenAll.screen12 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 100;

  const bg = setBackground(scene, 'image-g12_bg').setY(y);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_12,
      direction: 'right',
      offsetX: 30,
      offsetY: bg.height - 200,
      distanceY: 500,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_12 = screen;
  return screen;
};

screenAll.screen13 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g13_bg').setY(y);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_13,
      direction: 'left',
      offsetX: 30,
      offsetY: 0,
      distanceY: 500,
    },
  );

  const textGroup1 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_13_1,
      direction: 'right',
      offsetX: 30,
      offsetY: bg.height - 400,
      distanceY: 500,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
    textAnimation(scene, textGroup1);
  };

  const screen: ScreenConfig = {
    x,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_13 = screen;
  return screen;
};

screenAll.screen14 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 200;

  const bg = setBackground(scene, 'image-g14_bg').setY(y);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_14,
      direction: 'bottom',
      offsetX: 30,
      offsetY: 700,
      animate_offset: -200,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_14 = screen;
  return screen;
};

screenAll.screen15 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 150;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g15_bg');

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  bg.setY(y + screenPaddingTop);
  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_15,
      direction: 'left',
      offsetX: 30,
      offsetY: 0,
      animate_offset: 0,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_15 = screen;
  return screen;
};

screenAll.screen16 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g16_bg').setY(y);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;
  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_16,
      direction: 'right',
      offsetX: 30,
      offsetY: -100,
      animate_offset: 0,
    },
  );

  // createTestBg(scene, y, height);

  const icon = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon',
      image: 'image-g16_icon1',
      offsetX: -370,
      offsetY: -200,
      distanceY: 430,
      distanceX: 300,
      animate_offset: 300,
    },
  );

  const sound = scene.sound.get('g16');

  let isplay = false;

  const animate = () => {
    textAnimation(scene, textGroup);

    icon.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveY, moveX, percent } = opt.data;

        const angle = getProcessValue(percent, 0, 25);
        icon.icon.setAngle(angle);

        icon.icon.setX(moveX);
        icon.icon.setY(moveY);
        isplay = false;
      } else if (opt.type === 'start') {
        icon.icon.setAngle(0);
      } else if (opt.type === 'end') {
        icon.icon.setAngle(25);

        if (!isplay) {
          isplay = true;
          sound.play();
        }
      }
    });
  };

  const screen: ScreenConfig = {
    x,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_16 = screen;
  return screen;
};

screenAll.screen17 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g17_bg').setY(y);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;
  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_17,
      direction: 'right',
      offsetX: 30,
      offsetY: 100,
      distanceY: 400,
      animate_offset: 0,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_17 = screen;
  return screen;
};

screenAll.screen18 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 100;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g18_bg').setY(y + screenPaddingTop);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      align: 'right',
      name: 'textGroup',
      text: writing.screen_18,
      direction: 'right',
      offsetX: 30,
      offsetY: 0,
      distanceY: 500,
    },
  );

  const textGroup1 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_18_1,
      direction: 'left',
      offsetX: 30,
      offsetY: height - 200,
      distanceY: 500,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
    textAnimation(scene, textGroup1);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_18 = screen;
  return screen;
};

screenAll.screen19 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 100;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g19_bg');
  bg.setY(y + screenPaddingTop);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup11',
      text: writing.screen_19,
      direction: 'right',
      offsetX: 30,
      // offsetX: -643,
      offsetY: 150,
      animate_offset: 100,
      animate_start_disabled: true,
      animate_end_disabled: true,
    },
  );

  const textGroup1 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      align: 'right',
      text: writing.screen_20,
      direction: 'left',
      offsetX: 30,
      offsetY: 100,
      animate_offset: 900,
    },
  );

  const textGroup2 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_20_1,
      direction: 'right',
      offsetX: 30,
      offsetY: 850,
      // offsetY: 850,
      animate_offset: 200,
    },
  );

  const { icon, config, resetAnimate } = createImageObject(
    scene,
    { x, y: y + screenPaddingTop },
    {
      name: 'icon',
      image: 'image-g20_bg',
      offsetX: 70,
      offsetY: 120,
      scale: 0.5,
      distanceX: -70,
      distanceY: 0,
      animate_distance: 100,
      animate_offset: 200,
    },
  );

  bg.setDepth(1);

  const bgY = bg.y;

  const _textGroup = { start_x: textGroup.x, end_x: 30 };

  const animate = () => {
    textAnimation(scene, textGroup);
    textAnimation(scene, textGroup1);
    textAnimation(scene, textGroup2);

    resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveY, moveX, percent } = opt.data;
        const scale = getProcessValue(percent, 0.5, 1);
        const bg_scale = getProcessValue(percent, 1, 2.33);
        const bg_x = getProcessValue(percent, 0, -180);
        const bg_y = getProcessValue(percent, bgY, bgY + 180);
        bg.setScale(bg_scale);
        bg.setAlpha(1);
        bg.setX(bg_x);
        bg.setY(bg_y);

        icon.setScale(scale);
        icon.setX(moveX);
        icon.setY(moveY);

        const start_x = getProcessValue(percent, 30, -_textGroup.start_x);
        textGroup.setX(start_x);
      } else if (opt.type === 'start') {
        icon.setScale(0.5);

        bg.setX(0);
        bg.setY(bgY);
        bg.setAlpha(1);
        bg.setScale(1);
      } else if (opt.type === 'end') {
        icon.setScale(1);

        bg.setX(-180);
        bg.setY(bgY + 180);
        bg.setAlpha(0);
        bg.setScale(2.33);
      }
    });
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    isMoveCameras: true,
    y_animate_end: config.y_animate_end,
    y_animate_start: config.y_animate_start,
    animate,
  };

  scene.screen_19 = screen;
  return screen;
};

screenAll.screen20 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 0;

  // const bg = setBackground(scene, 'image-g20_bg');
  // bg.setY(y + screenPaddingTop);

  const height = 0 + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  // const textGroup = createTextGroup(
  //   scene,
  //   { x, y },
  //   {
  //     name: 'textGroup',
  //     align: 'right',
  //     text: writing.screen_20,
  //     direction: 'left',
  //     offsetX: 30,
  //     offsetY: 100,
  //   },
  // );

  // const textGroup1 = createTextGroup(
  //   scene,
  //   { x, y },
  //   {
  //     name: 'textGroup',
  //     text: writing.screen_20_1,
  //     direction: 'right',
  //     offsetX: 30,
  //     offsetY: 850,
  //     animate_offset: 100,
  //   },
  // );

  // const animate = () => {
  //   textAnimation(scene, textGroup);
  //   textAnimation(scene, textGroup1);
  // };

  const screen: ScreenConfig = {
    x,
    y,
    height,
    positionY,
    animate: () => {},
  };

  scene.screen_20 = screen;
  return screen;
};

screenAll.screen21 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY - 200;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 200;

  const bg = setBackground(scene, 'image-g21_bg');
  bg.setY(y + screenPaddingTop);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      align: 'right',
      text: writing.screen_21,
      direction: 'left',
      offsetX: 30,
      offsetY: 100,
      animate_offset: 200,
    },
  );

  const textGroup1 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_21_1,
      direction: 'top',
      offsetX: 30,
      offsetY: 900,
      animate_offset: 300,
    },
  );

  const sound = scene.sound.get('g21');

  const animate = (viewY: number) => {
    if (viewY > y + height / 2 && viewY < positionY + height / 3) {
      if (!sound.isPlaying) sound.play({ delay: 1 });
    }
    textAnimation(scene, textGroup);
    textAnimation(scene, textGroup1);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_21 = screen;
  return screen;
};

screenAll.screen22 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 300;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g22_bg');
  bg.setY(y + screenPaddingTop);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_22,
      direction: 'left',
      offsetX: 30,
      offsetY: 30,
      animate_offset: 100,
    },
  );

  const icon1 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon',
      image: 'image-g22_icon1',
      offsetY: 400,
      offsetX: -700,
      distanceX: 720 * 2,
      animate_distance: 200,
      animate_offset: 300,
    },
  );

  const icon2 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon',
      image: 'image-g22_icon1',
      offsetY: 400,
      offsetX: -700,
      distanceX: 720,
      animate_distance: 200,
      animate_offset: 400,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);

    icon1.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveX } = opt.data;
        icon1.icon.setX(moveX);
      }
    });

    icon2.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveX } = opt.data;
        icon2.icon.setX(moveX);
      }
    });
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_22 = screen;
  return screen;
};

screenAll.screen23 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 300;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g23_bg');
  bg.setY(y + screenPaddingTop);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_23,
      direction: 'right',
      offsetX: 30,
      offsetY: 30,
      animate_offset: 100,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_23 = screen;
  return screen;
};

screenAll.screen24 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 100;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g24_bg');
  bg.setY(y + screenPaddingTop);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_24,
      direction: 'top',
      offsetX: 30,
      offsetY: 30,
      animate_offset: 400,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_24 = screen;
  return screen;
};

screenAll.screen25 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 300;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g25_bg');
  bg.setY(y + screenPaddingTop);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_25,
      direction: 'left',
      offsetX: 30,
      offsetY: 30,
      animate_offset: 100,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_25 = screen;
  return screen;
};

screenAll.screen26 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 300;
  const screenPaddingBottom = 100;

  const bg = setBackground(scene, 'image-g26_bg');
  bg.setY(y + screenPaddingTop);
  // bg.setDepth(1);
  bg.setX(x - 10 + (scene.cameras.main.width - bg.width) / 2);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      align: 'right',
      text: writing.screen_26,
      direction: 'left',
      offsetX: 30,
      offsetY: 30,
      animate_offset: 200,
    },
  );

  const textGroup1 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_27,
      direction: 'left',
      offsetX: 30,
      offsetY: 1000,
      animate_offset: 200,
    },
  );

  const textGroup2 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_28,
      direction: 'top',
      offsetX: 30,
      offsetY: 400,
      animate_offset: 2000,
    },
  );

  const g27 = createImageObject(
    scene,
    { x, y },
    {
      name: 'g27',
      image: 'image-g27_bg',
      offsetX: 280 + 15.5, // (scene.cameras.main.width - g27.icon.width) / 2
      offsetY: 510,
      alpha: 0,
      scale: 0.4,
      angle: -5,
      distanceX: -280,
      distanceY: -100,
      animate_distance: 200,
      animate_offset: 800,
    },
  );

  const g28 = createImageObject(
    scene,
    { x, y },
    {
      name: 'g28',
      image: 'image-g28_bg',
      offsetX: 290,
      offsetY: 814,
      scale: 0.23,
      alpha: 0,
      origin: [0, 0.5],
      distanceX: -290,
      distanceY: 100,
      animate_distance: 200,
      animate_offset: 600,
    },
  );

  g28.icon.setDepth(10);

  const icon_hand = createImageObject(
    scene,
    { x, y },
    {
      name: 'g27',
      image: 'image-icon_hand',
      offsetX: 353,
      offsetY: 839,
      animate_distance: 50,
      animate_offset: 1000,
    },
  );

  let is_g27_end = false;

  const sound = scene.sound.get('g26');

  let isPlaying = false;

  const animate = () => {
    textAnimation(scene, textGroup);
    textAnimation(scene, textGroup1);
    textAnimation(scene, textGroup2);

    g27.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveY, moveX, percent } = opt.data;

        const scale = getProcessValue(percent, 0.4, 1);
        const angle = getProcessValue(percent, -5, 0);
        const alpha = getProcessValue(percent, 0, 5);
        g27.icon.setScale(scale);
        g27.icon.setAlpha(alpha);
        g27.icon.setAngle(angle);
        g27.icon.setX(moveX);
        g27.icon.setY(moveY);
        is_g27_end = false;

        if (!isPlaying) {
          if (sound) sound.play();
          isPlaying = true;
        }
      } else if (opt.type === 'start') {
        g27.icon.setScale(0.4);
        g27.icon.setAngle(-5);
        g27.icon.setAlpha(0);

        is_g27_end = false;
        isPlaying = false;
      } else if (opt.type === 'end') {
        g27.icon.setScale(1);
        g27.icon.setAngle(0);
        g27.icon.setAlpha(1);

        is_g27_end = true;
      }
    });

    g28.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveY, moveX, percent } = opt.data;
        const scale = getProcessValue(percent, 0.23, 1);
        const alpha = getProcessValue(percent, 0, 5);
        g28.icon.setX(moveX);
        g28.icon.setY(moveY);
        g28.icon.setAlpha(alpha);
        g28.icon.setScale(scale);

        g27.icon.setAlpha(1);
        bg.setAlpha(1);
        icon_hand.icon.setAlpha(0);
      } else if (opt.type === 'start') {
        if (is_g27_end) g28.icon.setAlpha(0);
        g28.icon.setScale(0.23);
      } else if (opt.type === 'end') {
        bg.setAlpha(0);
        g27.icon.setAlpha(0);
        g28.icon.setAlpha(1);
        g28.icon.setScale(1);

        icon_hand.icon.setAlpha(0);
      }
    });

    icon_hand.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent } = opt.data;
        const alpha = getProcessValue(percent, 0, 1.3);
        const scale = getProcessValue(percent, 1, 0.7);
        icon_hand.icon.setAlpha(alpha);
        icon_hand.icon.setScale(scale);
      } else if (opt.type === 'start') {
        icon_hand.icon.setAlpha(0);
      }
    });
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    name: 'g26',
    height,
    positionY,
    animate,
    isMoveCameras: true,
    y_animate_end: g27.config.y_animate_end + 700,
    y_animate_start: g27.config.y_animate_start,
  };

  scene.screen_26 = screen;
  return screen;
};

screenAll.screen27 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 0;

  // const bg = setBackground(scene, 'image-g27_bg');
  // bg.setY(y + screenPaddingTop);

  const height = 0 + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  // const textGroup = createTextGroup(
  //   scene,
  //   { x, y },
  //   {
  //     name: 'textGroup',
  //     text: writing.screen_27,
  //     direction: 'top',
  //     offsetX: 30,
  //     offsetY: 600,
  //     animate_offset: -100,
  //   },
  // );

  // const g28 = createImageObject(
  //   scene,
  //   { x, y: scene.screen_26.y },
  //   {
  //     name: 'g28',
  //     image: 'image-g28_bg',
  //     offsetX: 317,
  //     offsetY: 545,
  //     scale: 0.1,
  //     // offsetX: 280 + 15.5, // (scene.cameras.main.width - g28.icon.width) / 2
  //     // offsetY: 480,
  //     // scale: 0.2,
  //     // angle: 0,
  //     // distanceX: -280,
  //     // distanceY: -100,
  //     // animate_distance: 200,
  //     // animate_offset: 300,
  //   },
  // );

  // Position(scene, g28.icon);
  // g28.icon.setY(scene.screen_26.y);
  // g28.icon.setX(x + (scene.cameras.main.width - g28.icon.displayWidth) / 2);

  const animate = () => {
    // textAnimation(scene, textGroup);
    // g28.resetAnimate((opt) => {
    //   if (opt.type === 'going') {
    //     const { moveY, moveX, percent } = opt.data;
    //     const scale = getProcessValue(percent, 0.44, 1);
    //     const angle = getProcessValue(percent, -6.5, 0);
    //     g28.icon.setScale(scale);
    //     g28.icon.setAngle(angle);
    //     g28.icon.setX(moveX);
    //     g28.icon.setY(moveY);
    //   } else if (opt.type === 'start') {
    //   } else if (opt.type === 'end') {
    //   }
    // });
  };

  const screen: ScreenConfig = {
    x,
    y,
    height,
    positionY,
    animate,
    // isMoveCameras: true,
    // y_animate_end: scene.screen_26.y_animate_end || 0 + 200,
    // y_animate_start: scene.screen_26.y_animate_start || 0 + 200,
  };

  scene.screen_27 = screen;
  return screen;
};

screenAll.screen28 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 300;

  // const bg = setBackground(scene, 'image-g28_bg');
  // bg.setY(y + screenPaddingTop);

  const height = 0 + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  // const textGroup = createTextGroup(
  //   scene,
  //   { x, y },
  //   {
  //     name: 'textGroup',
  //     text: writing.screen_28,
  //     direction: 'left',
  //     offsetX: 30,
  //     offsetY: 30,
  //   },
  // );

  const animate = () => {
    // textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_28 = screen;
  return screen;
};
screenAll.screen29 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g29_bg');
  bg.setY(y + screenPaddingTop);
  bg.setX(x + (scene.cameras.main.width - bg.width) / 2);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      align: 'right',
      text: writing.screen_29,
      direction: 'left',
      offsetX: 30,
      offsetY: -50,
      animate_offset: 1800,
    },
  );

  const textGroup1 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_29_1,
      direction: 'left',
      offsetX: 30,
      offsetY: 1000,
      animate_offset: 1400,
    },
  );
  const textGroup2 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_29_2,
      direction: 'left',
      // offsetX: -(scene.cameras.main.width + 50),
      offsetX: 0,
      offsetY: 390,
      animate_end_disabled: true,
      // distanceX: scene.cameras.main.width + 50,
      animate_offset: 0,
    },
  );

  const icon1 = createImageObject(
    scene,
    { x, y: y + screenPaddingTop },
    {
      name: 'icon1',
      image: 'image-g29_icon1',
      offsetX: 0,
      offsetY: 170,
      animate_distance: 200,
      animate_offset: 1720,
    },
  );

  textGroup2.setX(30);

  const animate = () => {
    textAnimation(scene, textGroup);
    textAnimation(scene, textGroup1);

    icon1.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent } = opt.data;
        console.log('percent :>> ', percent);
        const num = getProcessValue(percent, 1, 5);
        if (num <= 2) {
          const per = (num - 1) / 1;
          const alpha = getProcessValue(per, 0, 1);
          textGroup2.setAlpha(alpha);
        } else if (num >= 3) {
          const per = (num - 3) / 1;
          const alpha = getProcessValue(per, 1, 0);
          textGroup2.setAlpha(alpha);
        }

        if (num < 2 && icon1.icon.name !== 'icon1') {
          icon1.icon.setTexture('image-g29_icon1');
          icon1.icon.setName('icon1');
        } else if (num > 2 && num < 3 && icon1.icon.name !== 'icon2') {
          icon1.icon.setTexture('image-g29_icon2');
          icon1.icon.setName('icon2');
        } else if (num > 3 && num < 4 && icon1.icon.name !== 'icon3') {
          icon1.icon.setTexture('image-g29_icon3');
          icon1.icon.setName('icon3');
        } else if (num > 4 && num < 5 && icon1.icon.name !== 'icon4') {
          icon1.icon.setTexture('image-g29_icon4');
          icon1.icon.setName('icon4');
        }
      } else if (opt.type === 'start') {
        if (icon1.icon.name !== 'icon1') {
          icon1.icon.setTexture('image-g29_icon1');
          icon1.icon.setName('icon1');
        }
        textGroup2.setAlpha(0);
      } else if (opt.type === 'end') {
        if (icon1.icon.name !== 'icon4') {
          icon1.icon.setTexture('image-g29_icon4');
          icon1.icon.setName('icon4');
        }
        textGroup2.setAlpha(0);
      }
    });
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    isMoveCameras: true,
    y_animate_start: icon1.config.y_animate_start,
    y_animate_end: icon1.config.y_animate_start + 250,
    animate,
  };

  scene.screen_29 = screen;
  return screen;
};

screenAll.screen30 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 100;
  const screenPaddingBottom = 100;

  const bg = setBackground(scene, 'image-g30_bg');
  bg.setY(y + screenPaddingTop);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_30,
      direction: 'bottom',
      offsetX: 30,
      offsetY: 30,
      animate_offset: 1500,
    },
  );
  const textGroup1 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      align: 'right',
      text: writing.screen_30_1,
      direction: 'left',
      offsetX: 30,
      offsetY: height / 2 + 100,
      animate_offset: 1500,
    },
  );
  const textGroup2 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_30_2,
      direction: 'right',
      offsetX: 30,
      offsetY: height - 300,
      animate_offset: 1500,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
    textAnimation(scene, textGroup1);
    textAnimation(scene, textGroup2);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_30 = screen;
  return screen;
};

screenAll.screen31 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g31_bg');
  bg.setY(y + screenPaddingTop);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      align: 'right',
      text: writing.screen_31,
      direction: 'left',
      offsetX: 30,
      offsetY: 0,
      animate_offset: 1500,
    },
  );
  const textGroup1 = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_31_1,
      direction: 'top',
      offsetX: 30,
      offsetY: height - 300,
      distanceY: 600,
      animate_offset: 1700,
    },
  );

  const animate = () => {
    textAnimation(scene, textGroup);
    textAnimation(scene, textGroup1);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_31 = screen;
  return screen;
};

screenAll.screen32 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 100;
  const screenPaddingBottom = 200;

  const bg = setBackground(scene, 'image-g32_bg');
  bg.setY(y + screenPaddingTop);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const textGroup = createTextGroup(
    scene,
    { x, y },
    {
      name: 'textGroup',
      text: writing.screen_32,
      direction: 'right',
      offsetX: 30,
      offsetY: height - 350,
      animate_offset: 1700,
    },
  );
  const animate = () => {
    textAnimation(scene, textGroup);
  };

  const screen: ScreenConfig = {
    x: 0,
    y,
    height,
    positionY,
    animate,
  };

  scene.screen_32 = screen;
  return screen;
};

screenAll.screen33 = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 100;
  const screenPaddingBottom = 0;

  const bg = setBackground(scene, 'image-g33_bg');
  bg.setY(y + screenPaddingTop);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const light = scene.add.container();

  const light_1 = scene.make.sprite({ key: 'image-g33_icon7', x: 50, y: 500 });
  const light_2 = scene.make.sprite({ key: 'image-g33_icon8', x: 600, y: 900 });
  const light_3 = scene.make.sprite({ key: 'image-g33_icon9', x: 300, y: 1200 });

  light.add([light_1, light_2, light_3]);
  light.setDepth(33);
  light.y = bg.y;

  const icon1 = createImageObject(
    scene,
    { x, y },
    {
      name: 'icon1',
      image: 'image-g33_icon1',
      offsetX: -724,
      offsetY: 0,
      distanceX: 724,
      animate_distance: 100,
      animate_offset: 1200,
    },
  );

  const icon2 = createImageObject(
    scene,
    { x, y: icon1.icon.y + 400 },
    {
      name: 'icon2',
      image: 'image-g33_icon2',
      offsetX: -849,
      offsetY: 0,
      distanceX: 650,
      animate_distance: 100,
      animate_offset: 1200,
    },
  );

  const icon3 = createImageObject(
    scene,
    { x, y: icon2.icon.y + 200 },
    {
      name: 'icon3',
      image: 'image-g33_icon3',
      offsetX: 807,
      offsetY: 0,
      distanceX: -600,
      animate_distance: 100,
      animate_offset: 1200,
    },
  );

  const icon4 = createImageObject(
    scene,
    { x, y: icon3.icon.y + 200 },
    {
      name: 'icon4',
      image: 'image-g33_icon4',
      offsetX: -628,
      offsetY: 0,
      distanceX: 560,
      animate_distance: 100,
      animate_offset: 1200,
    },
  );

  const icon5 = createImageObject(
    scene,
    { x, y: icon4.icon.y - 200 },
    {
      name: 'icon5',
      image: 'image-g33_icon5',
      offsetX: 720,
      offsetY: 0,
      distanceX: -466,
      animate_distance: 100,
      animate_offset: 1200,
    },
  );

  const icon6 = createImageObject(
    scene,
    { x, y: icon5.icon.y + 700 },
    {
      name: 'icon6',
      image: 'image-g33_icon6',
      offsetX: -586,
      offsetY: 0,
      distanceX: 516,
      animate_distance: 100,
      animate_offset: 1500,
    },
  );

  const animate = () => {
    icon1.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveX } = opt.data;
        icon1.icon.setX(moveX);
      }
    });
    icon2.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveX } = opt.data;
        icon2.icon.setX(moveX);
      }
    });
    icon3.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveX } = opt.data;

        icon3.icon.setX(moveX);
      }
    });
    icon4.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveX } = opt.data;

        icon4.icon.setX(moveX);
      }
    });
    icon5.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveX } = opt.data;

        icon5.icon.setX(moveX);
      }
    });
    icon6.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { moveX } = opt.data;

        icon6.icon.setX(moveX);
      }
    });
  };

  const screen: ScreenConfig = {
    x,
    y,
    height,
    positionY,
    // isMoveCameras: true,
    // y_animate_end: icon1.config.y_animate_end,
    // y_animate_start: icon1.config.y_animate_start,
    animate,
  };

  scene.screen_33 = screen;
  return screen;
};

screenAll.screenEnd = (scene: MainScene, op: ScreenOptions): ScreenConfig => {
  // const group = scene.add.container();
  const y = op.startY;
  const x = 0;
  const screenPaddingTop = 0;
  const screenPaddingBottom = 0;

  const { height: cameras_h, width: cameras_w } = scene.cameras.main;
  const bg = scene.add.container();
  const graphics = new Phaser.GameObjects.Graphics(scene);
  graphics.fillStyle(0xfdfae9, 1);
  graphics.fillRect(0, y, cameras_w, cameras_h);

  const img = new Phaser.GameObjects.Image(scene, 0, 0, 'image-g34_bg');
  img.setDisplayOrigin(0, 0);
  img.setAlpha(0.8);
  img.y = y + (cameras_h - img.height) / 2;

  bg.add([graphics, img]);
  bg.setSize(cameras_w, cameras_h);

  const height = bg.height + screenPaddingBottom + screenPaddingTop;
  const positionY = y + height;

  const getCenterX = (width: number) => (scene.cameras.main.width - width) / 2;
  const lineHeight = 60;

  const title = createImageObject(
    scene,
    { x, y },
    {
      name: 'title',
      image: 'image-loading_header',
      offsetX: getCenterX(505),
      offsetY: 20,
      distanceX: 0,
      distanceY: 0,
      alpha: 0,
      animate_distance: 200,
      animate_offset: 2000,
    },
  );

  const textGroup = [
    { text: '作为深圳首个建成区', width: 366 },
    { text: '罗湖区在过去40年里', width: 374 },
    { text: '从边陲的乡村到深圳的金融大区', width: 546 },
    { text: '创造了无数个“第一”', width: 375 },
    { text: '留下了一代人奋斗的印记', width: 438 },
    { text: '未来，一个全新向上', width: 366 },
    { text: '活力迸发的新罗湖正在踏步走来', width: 546 },
    { text: '让我们一同见证，续写罗湖故事', width: 546 },
  ];

  const lines = textGroup.map((item, index) => {
    const text = createTextGroup(
      scene,
      { x, y },
      {
        name: `line${index + 1}`,
        text: { date: '', docs: item.text },
        docsConfig: { color: '#5E5018', fontSize: '32px' },
        align: 'center',
        direction: 'bottom',
        offsetX: getCenterX(item.width - 20),
        offsetY: title.icon.height + lineHeight * index,
        distanceY: 200,
        animate_offset: 1500,
      },
    );
    return text;
  });

  const btnRepeat = createImageObject(
    scene,
    { x, y },
    {
      name: 'repeat',
      image: 'image-but_repeat',
      offsetX: 60,
      offsetY: bg.height - 150,
      distanceY: 0,
      alpha: 0,
      animate_distance: 30,
      animate_offset: 1400,
    },
  );

  btnRepeat.icon.setInteractive();
  btnRepeat.icon.on('pointerdown', () => {
    // 再看一遍

    scene.camerasScrollY = 0;
    scene.cameras.main.scrollY = 0;
  });

  const btnShare = createImageObject(
    scene,
    { x, y },
    {
      name: 'share',
      image: 'image-but_share',
      offsetX: 0,
      offsetY: bg.height - 150,
      distanceY: 0,
      distanceX: 0,
      alpha: 0,
      animate_distance: 30,
      animate_offset: 1400,
    },
  );
  btnShare.icon.setX(scene.cameras.main.width - btnShare.icon.width - 60);
  btnShare.icon.setInteractive();
  btnShare.icon.on('pointerup', () => {
    // 引导分享
    const share = window.document.querySelector('.share') as HTMLDivElement;

    if (share) {
      share.style.display = 'block';
    }
  });

  const animate = () => {
    lines.forEach((line) => {
      textAnimation(scene, line);
    });

    title.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent } = opt.data;
        const alpha = getProcessValue(percent, 0, 1);
        const _y = getProcessValue(percent, y, y + 50);
        title.icon.setAlpha(alpha);
        title.icon.setY(_y);
      }
      if (opt.type === 'start') {
        title.icon.setAlpha(0);
        title.icon.setY(y);
      } else if (opt.type === 'end') {
        title.icon.setY(y + 50);
        title.icon.setAlpha(1);
      }
    });

    btnRepeat.resetAnimate((opt) => {
      if (opt.type === 'going') {
        const { percent } = opt.data;
        const alpha = getProcessValue(percent, 0, 1);
        btnRepeat.icon.setAlpha(alpha);
        btnShare.icon.setAlpha(alpha);
      }
      if (opt.type === 'start') {
        btnRepeat.icon.setAlpha(0);
        btnShare.icon.setAlpha(0);

        scene.hand_group.setAlpha(1);
      } else if (opt.type === 'end') {
        btnRepeat.icon.setAlpha(1);
        btnShare.icon.setAlpha(1);
        scene.hand_group.setAlpha(0);
      }
    });
  };

  const screen: ScreenConfig = {
    x,
    y,
    height,
    positionY,
    animate,
    name: 'end',
  };

  scene.screen_end = screen;
  return screen;
};

const screen_num = Object.keys(screenAll);

export default class GamesScene {
  /** 不移动相机的场景 */
  static noMoveCamerasScreens: ScreenConfig[] = [];

  static scene: MainScene;

  static init(_this: MainScene) {
    console.time();
    this.scene = _this;
    const data: { [x: string]: ScreenConfig } = {};
    const num = [...Array(Object.keys(screenAll).length - 1)];

    num.forEach((v, i) => {
      const index = i + 1;
      data[`screen_${index}`] = screenAll[`screen${index}`](_this, { startY: data[`screen_${index - 1}`]?.positionY || 0 });

      if (data[`screen_${index}`].isMoveCameras) {
        this.noMoveCamerasScreens.push(data[`screen_${index}`]);
      }
    });

    screenAll.screenEnd(_this, { startY: data[`screen_${num.length}`].positionY });

    console.timeEnd();
  }

  static create(_this: MainScene) {
    this.createBgm(_this);

    if (isDev) {
      _this.cameras.main.scrollY = 0;
      _this.camerasScrollY = 0;
    }

    const { centerX, centerY } = _this.cameras.main;
    const min = -300;
    const max = _this.screen_end.y + 300;

    const camerasPan = (y: number, callback = () => {}) => {
      _this.cameras.main.pan(centerX, y, 500, 'Linear', false, callback);
    };

    let setTime = 0;
    let touchstartY = 0;
    let steptime = 0;
    let touchstart = false;
    let gap = 0;

    document.addEventListener('touchstart', (e) => {
      clearInterval(setTime);
      touchstart = true;
      touchstartY = e.changedTouches[0].clientY;
    });

    document.addEventListener('touchmove', (e) => {
      // console.log('_this.cameras.main.scrollY :>> ', _this.cameras.main.scrollY, _this.screen_end.y);
      if (_this.cameras.main.scrollY <= min) {
        camerasPan(centerY, () => {
          _this.camerasScrollY = 0;
        });
        return;
      }
      if (_this.cameras.main.scrollY >= max) {
        camerasPan(_this.screen_end.y + centerY, () => {
          _this.camerasScrollY = _this.cameras.main.scrollY + gap;
        });
        return;
      }
      if (!touchstart) return;

      const touchmoveY = e.changedTouches[0].clientY;
      steptime = -(touchmoveY - touchstartY) / 1000;

      if (!this.hasMoveCameras()) {
        _this.cameras.main.scrollY += -(touchmoveY - touchstartY) * 1.5;
      }

      _this.camerasScrollY += -(touchmoveY - touchstartY) * 1.5;
      // console.log('_this.camerasScrollY :>> ', _this.cameras.main.scrollY, _this.camerasScrollY);

      gap = _this.camerasScrollY - _this.cameras.main.scrollY;

      touchstartY = touchmoveY;
    });
    document.addEventListener('touchend', () => {
      touchstart = false;

      setTime = setInterval(() => {
        if (_this.cameras.main.scrollY <= 0) {
          clearInterval(setTime);
          _this.cameras.main.scrollY = 0;
          _this.camerasScrollY = 0;
          return;
        }

        if (_this.cameras.main.scrollY >= _this.screen_end.y) {
          clearInterval(setTime);
          _this.cameras.main.scrollY = _this.screen_end.y;

          _this.camerasScrollY = gap + _this.cameras.main.scrollY;
          return;
        }

        steptime *= 0.97;

        if (Math.abs(steptime) < 1 / 1000) {
          clearInterval(setTime);
        }

        if (!this.hasMoveCameras()) {
          _this.cameras.main.scrollY += steptime * 1000;
        }

        _this.camerasScrollY += steptime * 1000;

        gap = _this.camerasScrollY - _this.cameras.main.scrollY;
      }, 10);
    });
  }

  static update(_this: MainScene) {
    const viewportY = getViewportY(_this);
    screen_num.forEach((v, i) => {
      const index = i + 1;
      if (index === 1 || index === screen_num.length) return;
      // @ts-ignore
      _this[`screen_${index}`].animate(viewportY);
    });

    if (_this.screen_end) _this.screen_end.animate(viewportY);
  }

  static createBgm(_this: MainScene) {
    const bgm_btn = _this.add.sprite(0, 0, 'image-but_stop');
    // but_stop  but_play
    bgm_btn.setY(30 + bgm_btn.height / 2);
    bgm_btn.setX(_this.cameras.main.width - bgm_btn.width / 2 - 30);
    bgm_btn.setDepth(1999);
    bgm_btn.scrollFactorY = 0;

    const bgm = _this.sound.get('bgm');

    bgm.play();

    bgm_btn.setInteractive();

    bgm_btn.on('pointerdown', () => {
      if (bgm.isPlaying) {
        bgm.pause();
        bgm_btn.setTexture('image-but_play');
      } else {
        bgm.resume();
        bgm_btn.setTexture('image-but_stop');
      }
    });

    return bgm;
  }

  static createHand(_this: MainScene) {
    const { height, centerX } = _this.cameras.main;

    const container = _this.add.container();

    const up = _this.make.image({ x: centerX, y: height - 250, key: 'image-icon_up' }).setOrigin(0.5, 0);
    const hand = _this.make
      .image({ x: centerX + 0, y: up.y + up.displayHeight + 10, key: 'image-icon_hand' })
      .setScale(0.6)
      .setOrigin(0.5, 0);
    const down = _this.make.image({ x: centerX, y: hand.y + hand.displayHeight + 10, key: 'image-icon_down' }).setOrigin(0.5, 0);

    container.add([hand, up, down]);

    const tweens = (obj: Phaser.GameObjects.Image, y: number) => _this.tweens.add({
      targets: obj,
      repeat: -1,
      yoyo: true,
      props: { y: obj.y + y },
    });

    tweens(up, -10);
    tweens(down, 10);

    container.setAlpha(0);
    container.setDepth(9999);

    toggleAlphaTween({ scene: _this, targets: container, duration: 2000, alpha: 1 });

    container.scrollFactorY = 0;

    return container;
  }

  /** 是否移动相机 */
  static hasMoveCameras() {
    const viewportY = getViewportY(this.scene);

    return this.noMoveCamerasScreens.some((v) => {
      const { isMoveCameras, y_animate_start, y_animate_end } = v;
      return isMoveCameras && viewportY > y_animate_start! && viewportY < y_animate_end!;
    });
  }
}
